<template>
    <div id="main" :style="{width: '100%', height: '100%'}" />
</template>

<script>
import * as echarts from 'echarts';

export default {
  props: {
    ServiceCountList: {
        type: Array,
        default: null
    },
    ServiceNameList: {
        type: Array,
        default: null
    },
  },
  data() {
    return {
      chartDom: null,
      myChart: null,
      option: null,
    };
  },
//   watch: {
//     Day: {
//       handler (newName, oldName) {
//         this.myChart.dispose();
//         this.chartDom = document.getElementById("main");
//         this.myChart = echarts.init(this.chartDom);
//         this.initChart();
//       }
//     }
//   },
//   beforeDestroy() {
//     if (!this.myChart) {
//       return
//     }
//     this.myChart.dispose()
//     this.myChart = null;
//     this.chartDom=null;
//     this.option=null;
//   },
  mounted() {
    this.$nextTick(() => {
      this.chartDom = document.getElementById("main");
      this.myChart = echarts.init(this.chartDom);
      this.initChart();
    });
  },

  methods: {
    initChart() {
      // console.log(123);
        // console.log(this.ServiceCountList);
        // console.log(this.ServiceNameList);
      // return;
      // this.chart = echarts.init(this.$el, "macarons");

      this.option = {
        backgroundColor: '#fff',
        tooltip: {
          show:true,
        },
        xAxis: {
            type: 'value',
            name:'次数',
            },
        yAxis: {
            type: 'category',
            name:'按服务',
            nameTextStyle:{
              color: "#000",
            },
            data:this.ServiceNameList,
        },
         grid: {
        //         left: 50,
        //         right: 30,
                bottom: 40,
        //         top: 60,
                //  containLabel: true
            },
        series: [
          {
            name: '调用次数',
            itemStyle: {
              color: 'rgb(116,188,255)',
            },
            data: this.ServiceCountList,
            type: 'bar',
            stack: 'x',
            barWidth:18,
          },
      ]
      };
      this.option && this.myChart.setOption(this.option);
    },
    //
  },
};
</script>